<template>
  <div class="homepage">
      <div class="mmm_top">
           <div class="cart" >   
                <i class="el-icon-bangzhu"></i>
                <span>首页</span>
            </div>
            <div class="ch">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="按区域筛选">
                    <el-select
                        size="small"
                        @change="areaselected(formInline.area)"
                        v-model="formInline.area"
                        placeholder="按区域筛选"
                    >
                        <el-option
                        v-for="(item,index) in areacho"
                        :key="item+index"
                        :value="item.area"
                        >{{item.area}}</el-option>
                    </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="small" @click="choose">筛选</el-button>
                        <el-button type="primary" size="small" @click="chooseall">全部</el-button>
                    </el-form-item>
                </el-form>
            </div>
      </div>
     
      
      <div class="page_top">
          <div class="content1">
              <h3>总人数</h3>
              <p>{{baseData.staff_count}}</p>
          </div>
          <div class="content2">
              <h3>区域数</h3>
              <p>{{baseData.area_count}}</p>
          </div>
          <div class="content3">
              <h3>项目数</h3>
              <p>{{baseData.project_count}}</p>
          </div>
          <div class="content4" @click="gosheet">
              <h3>人力结构</h3>
          </div>
      </div>
      <div class="page_main">
          <div class="charts1">
              <h3>人员统计</h3>
              <div id="personchart" :style="{width: '100%', height: '30vh'}" @click="personalarea"></div>
          </div>
          <div class="charts1">
              <h3>人力成本总额</h3>
              <div id="costchart" :style="{width: '100%', height: '30vh'}"></div>
          </div>
          <div class="charts1">
              <h3>招聘完成率</h3>
              <div id="recruitchart" :style="{width: '100%', height: '30vh'}" @click="recruitarea"></div>
          </div>
          <div class="charts1">
              <h3>培训(人次/时数)</h3>
              <div id="trainchart" :style="{width: '100%', height: '30vh'}" @click="trainarea"></div>
          </div>
      </div>

      <el-dialog
        :visible.sync="dialogVisible"
        width="40%"
        :before-close="handleClose">
        <PersonDetailSheet></PersonDetailSheet>
      </el-dialog>
      
      <el-dialog
        :visible.sync="newdialogVisible"
        width="40%"
        :before-close="handleClose">
        <Recruitdetail></Recruitdetail>
      </el-dialog>

      <el-dialog
        :visible.sync="dialogFormVisible"
        width="40%"
        :before-close="handleClose">
        <Traindetail></Traindetail>
      </el-dialog>
  </div>
</template>

<script>
import {post ,get} from '../../utils/axios.tool'
import PersonDetailSheet from './persondetail_sheet'
import Recruitdetail from './recruitdetail'
import Traindetail from './traindetail'
export default {
    components:{
        PersonDetailSheet,
        Recruitdetail,
        Traindetail
    },
    data() {
        return {
            dialogVisible: false,
            newdialogVisible:false,
            dialogFormVisible:false,
            formInline: {
                area: "",
            },
            areacho:[],
            baseData:{
                staff_count:'',
                area_count:'',
                project_count:'',
            },
            oneData:{
                one:'',
                two:'',
                three:'',
                four:'',
                five:'',
                six:'',
                seven:'',
                eight:'',
                nine:'',
                ten:'',
                eleven:'',
                twelve:'',
            },
            threeData:{
                one:'',
                two:'',
                three:'',
                four:'',
                five:'',
                six:'',
                seven:'',
                eight:'',
                nine:'',
                ten:'',
                eleven:'',
                twelve:'',
            },
            fourData:{
                one:'',
                two:'',
                three:'',
                four:'',
                five:'',
                six:'',
                seven:'',
                eight:'',
                nine:'',
                ten:'',
                eleven:'',
                twelve:'',
            },
            aaa:[],
            bbb:[],
            ccc:[]
        }
    },
    mounted(){
        this.run()
        this.getData()
        this.areachoose()
        this.getbaseData()
    },
    methods:{
        gosheet(){
            this.$router.push({
                path:'/formsheet'
            })
        },
        areaselected(val){
            this.formInline.area = val
        },
        choose(){
            this.$axios.get('/usermanage/hr_board/',this.formInline).then(res => {
                this.oneData = res
                this.drawLine()
            });
            this.$axios.get('/usermanage/recruit_area_board/',this.formInline).then(res => {
                this.threeData = res
                this.drawLine()
            });
            this.$axios.get('/usermanage/trains_area_board/',this.formInline).then(res => {
                this.fourData = res
                this.drawLine()
            });
        },
        chooseall(){
            this.getData()
            this.run()
        },
        areachoose(){
            let url='/usermanage/area/'
            this.$axios.get(url).then(res=>{
                this.areacho = res.data
            })
        },
        getbaseData(){
            let url = '/usermanage/base_board/'
            this.$axios.get(url).then(res=>{
                this.baseData = res
                
            })
        },
        run(){
           setTimeout(()=>{
               this.drawLine()
           },500)
        },
        getData(){
            this.$axios.get('/usermanage/hr_board/').then(res=>{
                this.oneData = res
            })
            this.$axios.get('/usermanage/recruit_area_board/').then(res=>{
                this.threeData = res
            })
            this.$axios.get('/usermanage/trains_area_board/').then(res=>{
                this.fourData = res
            })
        },
        handleClose(done) {
                done();
        },
        personalarea(params){
            this.dialogVisible = true
        },
        recruitarea(){
            this.newdialogVisible = true
        },
        trainarea(){
            this.dialogFormVisible = true
        },
        drawLine(){
            // 基于准备好的dom，初始化echarts实例
            let costchart = this.$echarts.init(document.getElementById('costchart'))
            // 绘制图表
            costchart.setOption({
                tooltip : {
                        trigger: 'axis'
                    },
                    // legend: {
                        
                    // },
                    // color:'',
                    xAxis : [
                        {   
                            type : 'category',
                            data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            name:'人数',
                            type:'bar',
                            data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                            markPoint : {
                                data : [
                                    {type : 'max', name: '最大值'},
                                    {type : 'min', name: '最小值'}
                                ]
                            }
                        },
                    ]

            });

            let personchart = this.$echarts.init(document.getElementById('personchart'))
            // 绘制图表
            personchart.setOption({
                tooltip : {
                        trigger: 'axis'
                    },
                    // legend: {
                        
                    // },
                    color:'#59746E',
                    xAxis : [
                        {   
                            type : 'category',
                            data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            name:'人数',
                            type:'bar',
                            data:[this.oneData.one,this.oneData.two,this.oneData.three,this.oneData.four,this.oneData.five,this.oneData.six,this.oneData.seven,this.oneData.eight,this.oneData.nine,this.oneData.ten,this.oneData.eleven,this.oneData.twelve],
                            markPoint : {
                                data : [
                                    {type : 'max', name: '最大值'},
                                    {type : 'min', name: '最小值'}
                                ]
                            },
                            itemStyle: {        //上方显示数值
                                normal: {
                                    label: {
                                        show: true, //开启显示
                                        position: 'top', //在上方显示
                                        textStyle: { //数值样式
                                            color: '#59746E',
                                            fontSize: 16
                                        }
                                    }
                                }
                            }
                        },
                    ],
                    
            });


            let recruitchart = this.$echarts.init(document.getElementById('recruitchart'))
            // 绘制图表
            recruitchart.setOption({
                title: {
						text: ''
					},
					tooltip : {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							label: {
								backgroundColor: '#6a7985'
							}
						}
                    },
                    color:'#2BB3D5',
					// legend: {
					// 	data:[]
					// },
					// grid: {
					// 	left: '3%',
					// 	right: '4%',
					// 	bottom: '3%',
					// 	containLabel: true
					// },
					xAxis : [
						{
							type : 'category',
							boundaryGap : false,
							data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
						}
					],
					yAxis : [
						{
							type : 'value'
						}
					],
					series : [
						{
							name:'完成率',
							type:'line',
							stack: '总量',
							areaStyle: {normal: {}},
                            data:[this.threeData.one,this.threeData.two,this.threeData.three,this.threeData.four,this.threeData.five,this.threeData.six,this.threeData.seven,this.threeData.eight,this.threeData.nine,this.threeData.ten,this.threeData.eleven,this.threeData.twelve],
                            itemStyle: {        //上方显示数值
                                normal: {
                                    label: {
                                        show: true, //开启显示
                                        position: 'top', //在上方显示
                                        textStyle: { //数值样式
                                            color: '#2BB3D5',
                                            fontSize: 16
                                        }
                                    }
                                }
                            }
                        },
					]
            });
            
            let trainchart = this.$echarts.init(document.getElementById('trainchart'))
            // 绘制图表
            trainchart.setOption({
                title: {
						text: ''
					},
					tooltip : {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							label: {
								backgroundColor: '#6a7985'
							}
						}
                    },
                    color:'#D8D87D',
					xAxis : [
						{
							type : 'category',
							boundaryGap : false,
							data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
						}
					],
					yAxis : [
						{
							type : 'value'
						}
					],
					series : [
						{
							name:'人次/时数',
							type:'line',
							stack: '总量',
							areaStyle: {normal: {}},
							data:[this.fourData.one,this.fourData.two,this.fourData.three,this.fourData.four,this.fourData.five,this.fourData.six,this.fourData.seven,this.fourData.eight,this.fourData.nine,this.fourData.ten,this.fourData.eleven,this.fourData.twelve],
                            itemStyle: {        //上方显示数值
                                normal: {
                                    label: {
                                        show: true, //开启显示
                                        position: 'top', //在上方显示
                                        textStyle: { //数值样式
                                            color: '#D8D87D',
                                            fontSize: 16
                                        }
                                    }
                                }
                            }
                        },
					]
            });

            
        }
    }
}
</script>

<style lang="less">
.homepage{
    .page_top{
        padding: 20px;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid gainsboro;
        .content1 ,.content2 ,.content3 ,.content4 {
            width: 20%;
            h3{
                color: white;
                font-size: 20px;
                font-weight: normal;
                letter-spacing: 2px;
                margin: 20px;
            }
            p{
                display: inline-block;
                margin: 10px 0 20px 24px;
                font-size: 22px;
                color: white;
            }
        }
        .content1{
            background: url("../../assets/img/homepage_1.png") no-repeat;
            background-size: 100% 100%;
        }
        .content2{
            background: url("../../assets/img/homepage_2.png") no-repeat;
            background-size: 100% 100%;
        }
        .content3{
            background: url("../../assets/img/homepage_3.png") no-repeat;
            background-size: 100% 100%;
        }
        .content4{
            background: url("../../assets/img/homepage_4.png") no-repeat;
            background-size: 100% 100%;
            cursor: pointer;
        }
    }
    .page_main{
        justify-content: space-between;
        display: flex;
        flex-wrap: wrap;
        .charts1{
            width: 45%;
            margin-top: 2vh;
            h3{
                text-align: center;
                margin: 0;
            }
        }
    }
    .mmm_top{
        display: flex;
        .cart{
            width: 20%;
            i{
                font-size: 20px;
                margin-right: 8px;
                color: gray;
            }
            span{
                font-size: 15px;
                color: gray;
                font-weight: bold;
            }
        }
        .ch{
            width: 80%;
        }
    }
    .el-button--small, .el-button--small.is-round{
        margin-right: 30px;
    }
}
</style>